<template>
    <div class="boxs">
        <el-card>
            <div slot="header" class="clearfix">
                <span>FoodGen_Config</span>
            </div>
            <el-form class="demo-form-inline" :model="form" :rules="rules" ref="ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="addVersion" style="display: block;width: 100%;" label-position="top"
                            prop="prompt_test">
                            <el-button type="primary" @click="openAddVersion" icon="el-icon-plus">add</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="version" style="display: block;width: 100%;" label-position="top"
                            prop="prompt_test">
                            <el-select v-model="queryParams.version" @change="handleQuery">
                                <el-option v-for="item in versionList" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="prompt" style="display: block;width: 100%;" label-position="top"
                            prop="prompt_test">
                            <el-input autosize type="textarea" v-model="form.prompt_test" placeholder="请输入提示词"
                                resize="none" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="model" label-position="top" prop="model_test">
                            <div style="display: flex; align-items: center;">
                                <el-input v-model="form.model_test" placeholder="Ai 模型" />
                                <el-tooltip class="item" style="margin-left: 10px;" effect="dark" content="Ai 模型"
                                    placement="top-end">
                                    <i class="el-icon-info" style="cursor: pointer;"></i>
                                </el-tooltip>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Temperature" label-position="top" prop="temperature_test">
                            <div style="display: flex; align-items: center;">
                                <el-input v-model="form.temperature_test" type="number" placeholder="通常在 0 到 1 之间" />
                                <el-tooltip class="item" style="margin-left: 10px;" effect="dark"
                                    content="控制生成文本的随机性。值越低，输出越确定；值越高，输出越随机。通常在 0 到 1 之间。" placement="top-end">
                                    <i class="el-icon-info" style="cursor: pointer;"></i>
                                </el-tooltip>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Top P" label-position="top" prop="top_p_test">
                            <div style="display: flex; align-items: center;">
                                <el-input v-model="form.top_p_test" type="number" placeholder="请输入Top P" />
                                <el-tooltip class="item" style="margin-left: 10px;" effect="dark"
                                    content="核采样。与 temperature 类似，但通过考虑概率分布的累积来限制选择。值为 0.1 意味着只考虑概率前 10% 的标记。"
                                    placement="top-end">
                                    <i class="el-icon-info" style="cursor: pointer;"></i>
                                </el-tooltip>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">

                    <el-col :span="8">
                        <el-form-item label="Presence penalty" label-position="top" prop="presence_penalty_test">
                            <div style="display: flex; align-items: center;">
                                <el-input v-model="form.presence_penalty_test" type="number" placeholder="-2.0 到 2.0" />
                                <el-tooltip class="item" style="margin-left: 10px;" effect="dark"
                                    content="控制生成文本中引入新词语的惩罚。值越高，模型更倾向于引入新词语。范围通常在 -2.0 到 2.0 之间。" placement="top-end">
                                    <i class="el-icon-info" style="cursor: pointer;"></i>
                                </el-tooltip>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Top K" label-position="top" prop="frequency_penalty_test">
                            <div style="display: flex; align-items: center;">
                                <el-input v-model="form.top_k_test" type="number" />

                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="Max tokens" label-position="top" prop="max_tokens_test">
                            <div style="display: flex; align-items: center;">
                                <el-input v-model="form.max_tokens_test" type="number" placeholder="请输入最大令牌数" />
                                <el-tooltip class="item" style="margin-left: 10px;" effect="dark"
                                    content="限制生成文本的最大长度。这个值决定了 API 可以返回的最大标记数。" placement="top-end">
                                    <i class="el-icon-info" style="cursor: pointer;"></i>
                                </el-tooltip>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="ingredients" label-position="top">
                            <el-input type="textarea" autosize v-model="form.ingredients" placeholder="ingredients" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="output_language" label-position="top">
                            <el-input type="textarea" autosize v-model="form.output_language"
                                placeholder="output_language" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="cuisine" label-position="top">
                            <el-input type="textarea" autosize v-model="form.cuisine" placeholder="cuisine" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="cuisine_dislike" label-position="top">
                            <el-input type="textarea" autosize v-model="form.cuisine_dislike"
                                placeholder="cuisine_dislike" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="dietary_preference" label-position="top">
                            <el-input type="textarea" autosize v-model="form.dietary_preference"
                                placeholder="dietary_preference" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="80">
                <el-col :span="8">
                    <el-button type="warning" :loading="bloading" @click="submitForm">运行</el-button>
                    <el-button type="primary" @click="submitForm1">更新至线上</el-button>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog title="result" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
            <div>
                <v-md-preview :text="messageRes.content"></v-md-preview>
            </div>
        </el-dialog>
        <el-dialog title="addVersion" :visible.sync="dialogVisible1" width="500px" :before-close="handleClose1">
            <div style="padding: 20px 30px; padding-bottom: 0;">
                <el-form :model="form1" :rules="rules1" ref="ruleForm1">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="addVersion" prop="version">
                                <el-input v-model="form1.version" placeholder="例:1.0.0" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">{{ $t('review.close') }}</el-button>
                <el-button :type="'primary'" @click="affirm"
                    :loading="addLoading">{{ $t('review.confirm') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getFoodGenConfig,
    updateFoodGenConfig,
    updateFoodGenConfigHandel,
    getFoodGenVersionList,
    addFoodGenVersion
} from "@/api/Recipe";
export default {
    name: "review",
    data() {
        return {
            bloading: false,
            dialogVisible: false,
            dialogVisible1: false,
            addLoading: false,
            messageRes: {
                content: "",
            },

            form: {
                prompt_test: "",
                model_test: "",
                temperature_test: "",
                top_p_test: "",
                frequency_penalty_test: "",
                top_k_test: "",
                max_tokens_test: "",
                 
                ingredients: "",
                output_language: "",
                cuisine: "",
                cuisine_dislike: "",
                dietary_preference: "",
            },
            form1: {
                version: "",
            },
            versionList: [],
            queryParams: {
                version: "",
            },
            rules: {
                prompt_test: [{ required: true, message: "请输入提示词", trigger: "blur" }],
                model_test: [{ required: true, message: "请输入模型", trigger: "blur" }],
                temperature_test: [{ required: true, message: "请输入温度", trigger: "blur" }],
                top_p_test: [{ required: true, message: "请输入Top P", trigger: "blur" }],
                frequency_penalty_test: [{ required: true, message: "请输入频率惩罚", trigger: "blur" }],
                presence_penalty_test: [{ required: true, message: "请输入存在惩罚", trigger: "blur" }],
                max_tokens_test: [{ required: true, message: "请输入最大令牌数", trigger: "blur" }],
            },
            rules1: {
                version: [{ required: true, message: "请输入版本号(例:1.0.0)", trigger: "blur" }],
            },
        };
    },
    created() {
        this.getversionList();
    },
    methods: {
        validateVersionFormat(version) {
            const regex = /^\d+\.\d+\.\d+$/;
            return regex.test(version);
        },
        openAddVersion() {
            this.dialogVisible1 = true
        },
        async getversionList() {
            this.elloading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            const { data } = await getFoodGenVersionList();
            this.queryParams.version = data[data.length - 1].id;
            this.getMore();
            this.versionList = data;
        },
        submitForm1() {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.$confirm("确定把配置信息更新到线上吗？", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "error",
                    }).then(async () => {
                        this.elloading = this.$loading({
                            lock: true,
                            text: "Loading",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        await updateFoodGenConfig(this.form);
                        await updateFoodGenConfigHandel(this.form);
                        this.getMore();
                        this.$message({
                            message: "success!",
                            type: "success",
                        });
                    });
                } else {
                    console.log("提交失败");
                    return false;
                }
            });
        },
        handleClose() {
            this.elloading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            this.messageRes.content = "";
            this.dialogVisible = false;
            this.getMore();
        },
        handleClose1() {
            this.form1.version = "";
            this.dialogVisible1 = false;
        },
        submitForm() {
            this.bloading = true;
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    let res = await updateFoodGenConfig(this.form);
                    if (res.code == 0) {
                        this.openAi();
                    }
                } else {
                    console.log("提交失败");
                    return false;
                }
            });
        },

        async openAi() {
            let {
                prompt_test,
                temperature_test,
                max_tokens_test,
                top_p_test,
                frequency_penalty_test,
                top_k_test,
                model_test,
                ingredients, 
                output_language, 
                cuisine, 
                cuisine_dislike, 
                dietary_preference, 
            } = this.form;
             
            // 1. 替换 prompt_test 里的 {country} 和 {language}
            let processedPrompt = prompt_test;
             
            // 3. 组装 messages 列表
            let messages = [];

            // push system，新版格式
            messages.push({
                role: "system",
                content: [
                    {
                        type: "text",
                        text: processedPrompt
                    }
                ]
            });
         
                messages.push({
                    role: "user",
                    content: [
                        {
                            type: "text",
                            text: `ingredients:${ingredients},output_language:${output_language},cuisine:${cuisine},cuisine_dislike:${cuisine_dislike},dietary_preference:${dietary_preference},`
                        }
                    ]
                });

            // --- 以下原有fetch等流程不变 ---
            fetch("https://api-st.siliconflow.cn/v1/chat/completions", {
                method: "POST",
                body: JSON.stringify({
                    model: model_test,
                    messages,
                    stream: true,
                    response_format: { type: "text" },
                    temperature: Number(temperature_test),
                    max_tokens: Number(max_tokens_test),
                    top_p: Number(top_p_test),
                    frequency_penalty: Number(frequency_penalty_test),
                    top_k: Number(top_k_test)
                }),
                headers: {
                    "Content-Type": "application/json",
                    Authorization: `Bearer sk-jwxwusgxhligjvuqchrvjhthmwlnepwwnjyywhtynppwvdpl`
                }
            })
                .then((response) => {
                    this.bloading = false;
                    this.messageRes.content = "";
                    this.dialogVisible = true;
                    const reader = response.body.getReader();
                    const decoder = new TextDecoder("utf-8");
                    let receivedData = "";
                    const that = this;
                    function processMessages() {
                        const messages = receivedData.split("\n");
                        for (let i = 0; i < messages.length - 1; i++) {
                            const message = messages[i];
                            that.formatDataStr(message, that.handleResult);
                        }
                        receivedData = messages[messages.length - 1];
                    }
                    function read() {
                        return reader.read().then(({ done, value }) => {
                            if (done) {
                                return;
                            }
                            receivedData += decoder.decode(value);
                            if (receivedData.includes("\n")) {
                                processMessages();
                            }
                            return read();
                        });
                    }
                    return read();
                })
                .catch((error) => {
                    this.bloading = false;
                    this.$message.error("请刷新重试！");
                    console.log(error);
                });
        },

        handleResult(result) {
            this.$set(this.messageRes, "content", this.messageRes.content + result);
        },
        formatDataStr(str, callback) {
            str.split("\n").forEach((line) => {
                if (line.trim().length > 20) {
                    line.split("data:").forEach((dataSection) => {
                        if (dataSection.trim().length > 10) {
                            const dataObject = JSON.parse(dataSection.trim());
                            if (dataObject.choices[0].delta.content) {
                                callback(dataObject.choices[0].delta.content);
                            }
                        }
                    });
                }
            });
        },
        async getMore() {
            let { data } = await getFoodGenConfig(this.queryParams);
            this.form = { ...data, ingredients: "", output_language: "", cuisine: "", cuisine_dislike: "", dietary_preference: "", };
            this.elloading.close();
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getMore();
        },
        async affirm() {
            this.$refs["ruleForm1"].validate(async (valid) => {
                if (!valid) return;
                this.addLoading = true;
                this.form1.version = this.form1.version.trim();
                if (!this.validateVersionFormat(this.form1.version)) {
                    this.addLoading = false;
                    this.$message.error("版本号格式不正确，应为 x.y.z");
                    return;
                }
                const res = await addFoodGenVersion(this.form1);
                if (res.code != 0) {
                    this.$message.error(res.msg);
                } else {
                    this.elloading = this.$loading({
                        lock: true,
                        text: "Loading",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)",
                    });
                    this.queryParams.version = this.form1.version.trim();
                    this.getversionList();
                    this.$message.success("success");
                }
                this.form1.version = "";
                this.addLoading = false;
                this.dialogVisible1 = false;
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.boxs {
    padding: 20px;
}

::v-deep .el-dialog__body {
    padding: 0;
}

::v-deep .vuepress-markdown-body:not(.custom) {
    padding: 20px;
}
</style>
